<template>
  <el-container>
    <div style="
        background-color: #fff;
        margin: 20px 0;
        box-shadow: 10px 10px 18px 0 rgba(0, 0, 0, 0.12);
        border-radius: 3px;
        padding-top: 25px;
      ">
      <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="margin: 1% auto; text-align: center">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="申请人" prop="name">
              <el-input v-model="temp_bussi.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号" prop="idCard">
              <el-input v-model="temp_bussi.idCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="tel">
              <el-input v-model="temp_bussi.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="乡镇街道" v-if="townState" prop="townName">
              <el-select v-model="temp_bussi.townName" placeholder="请选择乡镇街道" style="width: 100%" @change="townChange">
                <el-option label="请选择乡镇街道" value></el-option>
                <el-option v-for="item in temp_bussi.townList" :key="item.code" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="村组社区" prop="villageName">
              <el-select v-model="temp_bussi.villageName" placeholder="请选择村组社区">
                <el-option label="请选择村组社区" value></el-option>
                <el-option v-for="item in temp_bussi.villageList" :key="item.code" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-right: 30px">
            <el-form-item>
              <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
              <el-button @click="resetForm('temp_bussi')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-card style="margin-top:10px width:100%">

      <div style="width: 100%; background: white">
        <el-row>
          <el-col :span="2" style="margin-right: 2%">
            <el-button type="primary" @click="downloadInconformityTemp">不符合台账模板</el-button>
          </el-col>
          <el-col :span="2">
            <el-upload action :http-request="uploadHistoryData" accept=".xlsx, .xls" style="width: 100%"
              :before-upload="handleChange">
              <el-button type="primary">导入不符合台账</el-button>
            </el-upload>
          </el-col>
        </el-row>
      </div>

      <el-table v-loading="tableLoding" :data="tempTableData.data" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="name" label="申请人" align="center"></el-table-column>
        <el-table-column prop="idCard" label="证件号" align="center"></el-table-column>
        <el-table-column prop="townName" label="乡镇街道" align="center"></el-table-column>
        <el-table-column prop="villageName" label="村组社区" align="center"></el-table-column>
        <el-table-column prop="addressDetail" label="村（社）" align="center"></el-table-column>
        <el-table-column prop="inconformityReason" label="不符合原因" align="center"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 10px">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
          :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tempTableData.total"></el-pagination>
      </div>
    </el-card>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import {
    queryLawFileApi
  } from "@/api/queryApi";
  import {
    getTotalsApi,
    getHistoryList,
    deleteHistoryApi,
  } from "@/api/historyApi";
  import store from "@/vuex/store";
  import config from "@/config/config";
  import {
    getAddressList,
    getChildrenAddress,
    getChildrenAddressByName,
  } from "@/api/addressDictionary";
  import {
    getInconformityTempApi
  } from "@/api/applyApi";
  import axios from "axios";
  export default {
    data() {
      return {
        noPassData: {},
        handleEditState: false,
        uploadUrl: config.uploadHistoryUrl,
        file: {},
        townState: true,
        currentCode: store.getters.currentCode,
        uid: store.getters.uid,
        temp_bussi: {
          applyCode: "",
          region: "",
          idcard: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          name: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          townCode: "",
          villageCode: "",
          townName: "",
          villageName: "",
          tel: "",
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idCard: "",
            address: "",
            townName: "",
            villageName: "",
            inconformityReason: "",
            addressDetail: "",
          }, ],
          townName: "",
          villageName: "",
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0,
        },
        tableLoding: false, //表格加载
        changeRow: [],
        formData: {
          appKey: "",
          appFlag: 2,
          token: store.getters.token,
          versionCode: 0,
          param: "",
        },
        address: [],
      };
    },
    created: function () {
      this.showTown();
      this.getAddress();
      this.queryAllList();
    },
    methods: {
      deleteRow(index, row) {
        deleteHistoryApi(row.id)
          .then((res) => {
            this.queryAllList(this.temp_bussi);
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success",
            });
          })
          .catch((err) => {
            this.$message.error("删除失败");
          });
      },
      // 上传文件，获取文件流
      handleChange(file) {
        this.file = file;
      },
      downloadInconformityTemp() {
        getInconformityTempApi();
        this.$message({
          showClose: true,
          message: "下载成功",
          type: "success",
        });
      },
      uploadHistoryData() {
        // 创建表单对象;
        let form = new FormData();
        // 后端接受参数 ，可以接受多个参数
        form.append("file", this.file);
        form.append("token", store.getters.token);
        let configs = {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        };
        axios
          .post(this.uploadUrl, form, configs)
          .then((res) => {
            this.$message({
              message: "导入成功",
              type: "success",
            });
            this.queryAllList();
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              message: "导入失败，请检查",
              type: "error",
            });
          });
      },

      getAddress() {
        if (this.currentCode.length > 9) {
          getChildrenAddressByName("黔江区").then((townList) => {
            this.temp_bussi.townList = townList.data.data;
          });
        } else {
          getChildrenAddress(this.currentCode).then((villageList) => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      townChange(index) {
        if (this.temp_bussi.townName) {
          getChildrenAddressByName(this.temp_bussi.townName)
            .then((villageList) => {
              this.temp_bussi.villageList = villageList.data.data;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      },
      queryAllList() {
        this.tableLoding = true;
        getHistoryList(this.temp_bussi)
          .then((response) => {
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            this.tableLoding = false;
          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: error,
              type: "error",
            });
            this.tableLoding = false;
          });
      },
      //提交搜索
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.temp_bussi);
            getHistoryList(this.temp_bussi)
              .then((response) => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success",
                });
              })
              .catch((error) => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error",
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.queryAllList(this.temp_bussi);
      },
      changePageSize(val) {
        this.temp_bussi.pageSize = val;
        this.tempTableData.state = this.queryAllList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.queryAllList();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.townState = false;
          this.temp_bussi.townCode = this.currentCode;
        }
      },
    },
  };
</script>

<style>
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #70b3ff87 !important;
  }

  .headDiv div {
    display: inline-block;
  }

  .el-input--suffix .el-input__inner {
    padding: 0 15px;
  }

  .el-form--inline .el-form-item__label {
    width: 84px;
  }

  .el-form--inline .el-form-item__label {
    font-size: 18px;
  }
</style>